<template>
  <div class="show-img">
    <template v-if="detail.mainPictures">
      <div class="left">
        <div class="left-top">
          <img :src="detail.mainPictures[imgIndex]"/>
          <!-- 位置指示器 -->
          <div :style="{left: left + 'px', top: top + 'px'}"
               class="cover">
          </div>
          <!-- 在cover上方，用于move的遮罩，防止抖动 -->
          <div class="mask"
               @mousemove="onMouseMove"/>
          <!-- 大图预览 -->
          <div class="view">
            <img :src="detail.mainPictures[imgIndex]"
                 :style="{left: -left * 2 + 'px', top: -top * 2 + 'px'}"/>
          </div>
        </div>
        <div class="left-bottom">
          <good-show-img-bottom v-for="item in imgBottom"
                                :key="item.icon"
                                :data="item"/>
        </div>
      </div>
      <div class="right">
        <img v-for="(img, index) in detail.mainPictures"
             :key="img"
             :class="{active: imgIndex === index}"
             :src="img"
             @mouseenter="imgIndex = index"/>
      </div>
    </template>
  </div>
</template>

<script lang="ts"
        setup>
import {between} from '@/assets/utils/compute'
import GoodShowImgBottom from '@/components/library/GoodShowImgBottom.vue'
import type {GoodDetail, ImgBottom} from '@/types/good'
import {computed, inject, ref, toRefs} from 'vue'

let props = defineProps<{
  data: GoodDetail
}>()
let {data: detail} = toRefs(props)

let imgIndex = inject('imgIndex')
let imgBottom = computed((): ImgBottom[] => {
  return [
    {icon: 'icon-task-filling', label: '销量人气', link: '', subLabel: '销量人气', value: detail.value.salesCount},
    {icon: 'icon-comment-filling', label: '商品评价', link: '', subLabel: '查看评价', value: detail.value.commentCount},
    {icon: 'icon-favorite-filling', label: '收藏人气', link: '', subLabel: '收藏商品', value: detail.value.collectCount},
    {icon: 'icon-dynamic-filling', label: '品牌信息', link: '', subLabel: '品牌主页', value: detail.value.brand?.name}
  ]
})


let left = ref<number>(0)
let top = ref<number>(0)

function onMouseMove(e: any): void {
  left.value = between(e.layerX - 100, 0, 200)
  top.value = between(e.layerY - 100, 0, 200)
}
</script>

<style lang="less"
       scoped>
.show-img {
  width: 580px;
  height: 600px;
  padding: 30px 50px;
  display: flex;

  .left {
    .left-top {
      position: relative;
      cursor: move;

      &:hover {
        .view, .cover {
          display: block;
        }
      }

      > img {
        width: 400px;
        height: 400px;
        object-fit: cover;
      }

      .cover {
        display: none;
        width: 200px;
        height: 200px;
        background-color: rgba(0, 0, 0, .2);
        position: absolute;
      }

      .mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }

      .view {
        width: 400px;
        height: 400px;
        position: absolute;
        z-index: 10;
        overflow: hidden;
        display: none;
        top: 0;
        left: calc(100% + 12px);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);

        &:hover {
          display: none;
        }

        img {
          max-width: none;
          max-height: none;
          width: 800px;
          height: 800px;
          display: block;
          position: absolute;
          left: 0;
          top: 0;
        }
      }
    }

    .left-bottom {
      width: 400px;
      height: 140px;
      display: flex;
      align-items: center;
    }
  }

  .right {
    width: 80px;
    display: flex;
    flex-direction: column;
    padding-left: 12px;

    img {
      width: 64px;
      height: 64px;
      margin-bottom: 15px;
      cursor: pointer;
      border: 1px solid white;

      &:hover, &.active {
        border-color: @xtxColor;
      }
    }
  }
}
</style>